<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安全库存</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/plugin/iview/dist/styles/iview.css">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>
<body>

<div class="layuimini-container" id="app">
    <div class="layuimini-main">

        <!--搜索开始-->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
        </fieldset>

        <div style="margin-top: 10px;">
            <i-button type="info" @click="modal8 = true" icon="ios-add-circle-outline"> 添 加 安 全 库 存 </i-button>
        </div>

        <!--Tabs-->
        <Tabs active-key="key1" @on-click="tabsEventClick">
            <Tab-pane label="未审核" key="key1"></Tab-pane>
            <Tab-pane label="审核通过" key="key2"></Tab-pane>
            <Tab-pane label="审核不通过" key="key3"></Tab-pane>
        </Tabs>
        <!--Tabs-->

        <!--数据表格-->
        <i-table :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="action">

                <i-button v-if="indexVal == 0" icon="md-checkmark-circle" type="success" size="small" style="margin-right: 5px"> 审 核 通 过</i-button>
                <i-button v-if="indexVal == 0" type="error" size="small" icon="ios-paper-plane-outline"> 审 核 不 通 过</i-button>

                <i-button v-if="indexVal == 1" type="warning" ghost size="small" icon="md-create" style="margin-right: 5px"> 修 改</i-button>
                <i-button v-if="indexVal == 1" type="error" icon="md-trash" size="small"> 删 除</i-button>

                <i-button v-if="indexVal == 2" icon="ios-information" type="info" ghost size="small" style="margin-right: 5px"> 详 情</i-button>
            </template>
        </i-table>
        <!--数据表格-->

        <!--分页-->
        <Page
                :page-size-opts=[5,10,15,20]
                :current="page"
                :page-size="pageSize"
                style="margin-top: 20px"
                :total="total"
                @on-change="currentPageChange"
                @on-page-size-change="currentPageSizeChange"
                show-total
                show-sizer
                show-elevator/>
        <!--分页-->

        <!--modal-->
        <Modal
                width="1200"
                title="Title"
                v-model="modal8"
                :mask-closable="false">
            <p>Content of dialog</p>
            <p>Content of dialog</p>
            <p>Content of dialog</p>
        </Modal>
        <!--modal-->

    </div>
</div>

<!--jq-->
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../../lib/plugin/vue/vue.min.js"></script>
<script src="../../../lib/plugin/iview/dist/iview.min.js"></script>

<!--layui-->
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

<!--axios-->
<script src="../../../lib/plugin/axios/axios.min.js"></script>

<!--系统文件-->
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script>
    let urlApi = 'http://127.0.0.1:8004/';
    let vue;

    // 入口函数
    $(function () {
        // http request 拦截器
        axios.interceptors.request.use(
            config => {
                if (token) { //判断token是否存在
                    config.headers.token = $.cookie("TOKEN");  //将token设置成请求头
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        );

        // 初始化Vue
        vue = new Vue({
            // 控制区域
            el: '#app',
            // 数据
            data: {
                indexVal: 0,
                columns1: [
                    {title: '序号', key: 'id', align: 'center'},
                    {title: '产品名称',fixed: 'left', key: 'productName', align: 'center'},
                    {title: '产品编号', key: 'productId', align: 'center'},
                    {title: '库存报警下限数', key: 'minAmount', align: 'center'},
                    {title: '库存报警上限数', key: 'maxAmount', align: 'center'},
                    {title: '登记人', key: 'register', align: 'center'},
                    {title: '登记时间',width: 200, key: 'registerTime', align: 'center'},
                    {title: '配置要求', key: 'config', align: 'center'},
                    {title: '最大存储量', key: 'maxCapacityAmount', align: 'center'},
                    {
                        title: '操作',
                        slot: 'action',
                        width: 280,
                        fixed: 'right',
                        align: 'center'
                    }
                ],
                data1: [],
                page: 1,
                pageSize: 10,
                total: 9,
                modal8: false,
            },
            // 方法
            methods: {
                tabsEventClick(val) {
                    this.indexVal = val;
                },
                initTableData1() {
                    let params = `check_tag=0&page=${this.page}&limit=${this.pageSize}`;
                    axios.get(urlApi + "warehouseStock/querySecuritySheet?" + params).then(res => {
                        this.data1 = res.data.data;
                    }).catch(err => {
                        this.$Message.error('对方不想说话，并且向你抛出了一个异常');
                    });
                },
                // 当前页发生改变
                currentPageChange(val) {
                    this.page = val;

                    // 重新渲染表格数据
                    this.initTableData1();
                },
                // 当前页显示条数发生改变
                currentPageSizeChange(val) {
                    this.pageSize = val;

                    // 重新渲染表格数据
                    this.initTableData1();
                },
            },
            // 钩子函数
            mounted() {
                this.initTableData1();
            }
        })
    });
</script>
</body>
</html>
